<template>
	<div class="system-menu-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="menuDialogFormRef" :model="state" :rules="state.rules" size="default" label-width="80px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="上级菜单"  prop="ruleForm.menuSuperior">
							<el-cascader
								:options="state.menuData"
								:props="{ checkStrictly: true, value: 'id', label: 'menuName' }"
								placeholder="请选择上级菜单,不选则默认为一级菜单"
								clearable
								class="w100"
								v-model="state.ruleForm.menuSuperior"
							>
								<template #default="{ node, data }">
									<span>{{ data.menuName }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="菜单类型" prop="ruleForm.menuType">
							<el-radio-group v-model="state.ruleForm.menuType">
								<el-radio label="0">菜单</el-radio>
								<el-radio label="1">按钮</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单名称" prop="ruleForm.menuName">
							<el-input v-model="state.ruleForm.menuName" placeholder="" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单排序"  prop="ruleForm.menuSort">
							<el-input v-model="state.ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" />
						</el-form-item>
					</el-col>
					<template v-if="state.ruleForm.menuType === '0'">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="路由名称"  prop="ruleForm.routerName">
								<el-input v-model="state.ruleForm.routerName" placeholder="路由中的 name 值" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="路由路径"  prop="ruleForm.routerPath">
								<el-input v-model="state.ruleForm.routerPath" placeholder="路由中的 path 值" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="重定向"  prop="ruleForm.routerRedirect">
								<el-input v-model="state.ruleForm.routerRedirect" placeholder="请输入路由重定向" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="菜单图标"  prop="ruleForm.menuIcon">
								<IconSelector placeholder="请选择菜单图标" v-model="state.ruleForm.menuIcon" />
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="组件路径"  prop="ruleForm.componentPath">
								<el-input v-model="state.ruleForm.componentPath" placeholder="组件路径" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="菜单描述"  prop="ruleForm.menuDescribe">
								<el-input v-model="state.ruleForm.menuDescribe" placeholder="请输入菜单描述" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="是否启用"  prop="ruleForm.menuStatus">
								<el-radio-group v-model="state.ruleForm.menuStatus">
									<el-radio label="1">启用</el-radio>
									<el-radio label="0">不启用</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="是否隐藏"  prop="ruleForm.menuHide">
								<el-radio-group v-model="state.ruleForm.menuHide">
									<el-radio label="1">隐藏</el-radio>
									<el-radio label="0">不隐藏</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="页面缓存"  prop="ruleForm.menuCache">
								<el-radio-group v-model="state.ruleForm.menuCache">
									<el-radio label="1">缓存</el-radio>
									<el-radio label="0">不缓存</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="是否固定"  prop="ruleForm.menuAffix">
								<el-radio-group v-model="state.ruleForm.menuAffix">
									<el-radio label="1">固定</el-radio>
									<el-radio label="0">不固定</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="是否外链"  prop="ruleForm.menuLink">
								<el-radio-group v-model="state.ruleForm.menuLink" @change="onSelectLinkChange">
									<el-radio label="1">是</el-radio>
									<el-radio label="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="是否内嵌"  prop="ruleForm.menuIframe">
								<el-radio-group v-model="state.ruleForm.menuIframe" @change="onSelectIframeChange">
									<el-radio label="1">是</el-radio>
									<el-radio label="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<template v-if="state.ruleForm.menuLink === '1'">
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="外链地址"  prop="ruleForm.linkPath">
									<el-input
										v-model="state.ruleForm.linkPath"
										placeholder="外链时链接地址（http:xxx.com）"
										clearable
									>
									</el-input>
								</el-form-item>
							</el-col>
						</template>
						<template v-if="state.ruleForm.menuIframe === '1'">
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
								<el-form-item label="内嵌地址"  prop="ruleForm.iframePath">
									<el-input
										v-model="state.ruleForm.iframePath"
										placeholder="内嵌时链接地址（http:xxx.com）"
										clearable
									>
									</el-input>
								</el-form-item>
							</el-col>
						</template>
						
					</template>
					
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel()" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit(menuDialogFormRef)" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemMenuDialog">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import type { FormInstance } from 'element-plus'
import { menuApi } from './api';
import { ElMessage } from 'element-plus';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 引入组件
const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
// 引入 api 请求接口
const api = menuApi();

// 定义变量内容
const menuDialogFormRef = ref<FormInstance>();
const state = reactive({
	ruleForm: {
		menuSuperior : [] as any[], // 上级菜单
		id:'',//主键id
		parentId:'',//上级菜单id
		menuName:'',//菜单名
		menuType:'0',//菜单类型 0-菜单 1-按钮
		routerName:'',//路由名称
		routerPath:'',//路由路径
		routerRedirect:'',//路由重定向
		menuIcon:'',//菜单图标
		componentPath:'',//组件路径
		menuSort:'',//菜单排序
		menuHide:'0',//菜单是否隐藏 0-不隐藏 1-隐藏
		menuCache:'1',//菜单是否缓存 0-不缓存 1-缓存
		menuAffix:'0',//菜单是否固定 0-不固定 1-固定
		menuLink:'0',//菜单是否外链 0-不外链 1-外链
		linkPath:'',//外链地址
		menuIframe:'0',//菜单是否内嵌 0-不内嵌 1-内嵌
		iframePath:'',//内嵌地址
		menuStatus:'1',//菜单状态  0-禁用 1-启用
		menuDescribe:'',//菜单描述
	},
	menuData: [] as RouteItems, // 上级菜单数据
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	rules: {
		'ruleForm.menuType': { required: true, message: '请选择菜单类型', trigger: 'blur' },
		'ruleForm.menuName': { required: true, message: '请输入菜单名称', trigger: 'blur' },
		'ruleForm.menuSort': { required: true, message: '请输入排序', trigger: 'blur' },
		'ruleForm.routerName': { required: true, message: '请输入路由名称', trigger: 'blur' },
		'ruleForm.routerPath': { required: true, message: '请输入路由路径', trigger: 'blur' },
		'ruleForm.menuIcon': { required: true, message: '请选择菜单图标', trigger: 'blur' },
		'ruleForm.componentPath': { required: true, message: '请输入组件路径', trigger: 'blur' },
		'ruleForm.menuHide': { required: true, message: '请选择是否隐藏', trigger: 'blur' },
		'ruleForm.menuStatus': { required: true, message: '请选择是否启用', trigger: 'blur' },
		'ruleForm.menuLink': { required: true, message: '请选择是否外链', trigger: 'blur' },
		'ruleForm.menuIframe': { required: true, message: '请选择是否内嵌', trigger: 'blur' },
		'ruleForm.menuCache': { required: true, message: '请选择是否缓存', trigger: 'blur' },
		'ruleForm.menuAffix': { required: true, message: '请选择是否固定', trigger: 'blur' },
		'ruleForm.linkPath': { required: true, message: '请输入外链地址', trigger: 'blur' },
		'ruleForm.iframePath': { required: true, message: '请输入内嵌地址', trigger: 'blur' },
	},
});

// 获取所有菜单
const getAllMenu = () => {
	api.getMenuList().then(
		function (res) {
			state.menuData = res.data;
		}
	)
};

// 打开弹窗
const openDialog = (type: string, row?: any) => {
	if (type === 'edit') {
		state.ruleForm = row;
		state.dialog.title = '修改菜单';
		state.dialog.submitTxt = '修 改';
		//从后台获取该菜单的所有上级菜单，用于回显
		api.getMenuSuperior({'id':row.id}).then(
			function (res) {
				state.ruleForm.menuSuperior =  res.data.reverse();
			}
		)
	} else {
		//新增时 主键id和父id置为空
		state.ruleForm.id = '';
		state.ruleForm.parentId = '';
		state.dialog.title = '新增菜单';
		state.dialog.submitTxt = '新 增';
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
	
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 是否外链改变
const onSelectLinkChange = () => {
	if (state.ruleForm.menuLink == '1') {
		state.ruleForm.menuIframe = '0';
		state.ruleForm.iframePath = '';
	}
};
// 是否内嵌改变
const onSelectIframeChange = () => {
	if (state.ruleForm.menuLink == '1') {
		state.ruleForm.menuLink = '0';
		state.ruleForm.linkPath = '';
	}
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			// console.log('校验通过！')
			//获取上级菜单数组中的最后一个即为该菜单的父级菜单
			if(state.ruleForm.menuSuperior.length > 0) {
				state.ruleForm.parentId = state.ruleForm.menuSuperior[state.ruleForm.menuSuperior.length-1];
			} else {
				//如果数组为空，则表示该菜单为一级菜单，父级菜单为0
				state.ruleForm.parentId = '0';
			}
			api.save(state.ruleForm).then(
				(res) => {
					if (res.data.code === "000000") {
						ElMessage.success(res.data.message);
						getAllMenu();//更新上级菜单数据
						closeDialog(); // 关闭弹窗
						emit('refresh');
					} else {
						ElMessage.warning(res.data.message);
					}
				}
			)
		} else {
			// console.log('校验未通过！')
			return false
		}
	})
	
};
// 页面加载时
onMounted(() => {
	getAllMenu();
});

// 暴露变量
defineExpose({
	openDialog,
});
</script>
